<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>英雄联盟</title>
		<link rel="stylesheet" href="ux_1472801352_544877/iconfont.css" />
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<style>
			/*allHerosPage*/
			/*header start*/
			
			.ui-header h2 {
				font-size: 20px !important;
			}
			.ui-header > a {
				position: absolute !important;
				top: 10px !important;
			}
			.nav-glyphish-example a{
				font-size: 16px !important;
			}
			#fenlei{
				margin: 0;
				padding: 0;
			}
			#fenlei li{
				position: relative;
				list-style: none;
				display: block;
				float: left;
				width: calc(100%/4 - 21px);
				/*height: 40px;*/
				padding: 10px;
				border-bottom: 1px solid #ddd;
				border-left: 1px solid #ddd;
				background-color: white;
				color: #aaa;
				font-weight: 100 !important;
			}
			#fenlei li span{
				position: absolute;
				bottom: 7px;
				right: 7px;
				display: inline-block;
				width: 0px;
				height: 0px;
				border-bottom: 12px solid #ddd;
				border-left: 12px solid transparent;
			}
			/*header end*/
			/*ui-content start*/
			
			.ui-content,
			.ui-listview{
				margin: 0 !important;
				padding: 0 !important;
			}
			/*ui-content end*/
			/*listview start*/
			
			.ui-corner-all {
				border-radius: 0 !important;
			}
			.ui-listview li a{
				height: 83px !important;
				border: none !important;
				background-color: white !important;
				margin-bottom: 10px !important;
			}
			.ui-listview li a img {
				top: 13px !important;
				left: 10px !important;
			}
			.ui-listview li a h2 {
				margin-top: 0px !important;
			}
			.ui-listview li a p {
				font-size: 1em !important;
			}
			.p1 {
				color: #22AADD;
			}
			/*listview end*/
		</style>
	</head>

	<body>
		<!--所有英雄-->
		<div data-role="page" id="allHerosPage">
			<!--header-->
			<div data-role="header" data-position="fixed">
				<a href="index.html" class="ui-btn ui-icon-carat-l ui-btn-icon-left ui-btn-icon-notext ui-btn-corner-all" data-transition = "slide" data-direction = "reverse" target="_top"></a>
				<h2>英雄资料</h2>
				<div data-role="navbar" class="nav-glyphish-example">
					<ul>
						<li><a href="#">周免英雄</a></li>
						<li><a href="#">我的英雄</a></li>
						<li><a href="#" class="ui-btn-active">全部英雄</a></li>
					</ul>
				</div>
				<form>
					<input id="allHeroSearch" data-type = "search" placeholder="搜索英雄"/>
				</form>
				<ul id="fenlei">
					<li>英雄类型<span></span></li>
					<li>位置<span></span></li>
					<li>价格<span></span></li>
					<li>排序<span></span></li>
				</ul>
			</div>
			<!--header end-->

			<!--main content-->
			<div data-role="main" class="ui-content">
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<ul data-role="listview" data-filter="true" class="herosInfo" data-input="#allHeroSearch" data-set="true">
							<!--<li data-icon="false">
								<a href="#">
									<img src="http://ossweb-img.qq.com/images/lol/img/champion/Aatrox.png">
									<h2>皮城执法官</h2>
									<p>蔚</p>
									<p class="p1">
										<span>战士</span>
										<span>刺客</span>
									</p>
								</a>
							</li>-->
						</ul>
					</div>
					<div class="ui-block-b">
						<ul data-role="listview" data-filter="true" class="herosInfo" data-input="#allHeroSearch">
						</ul>
					</div>
				</div>
				<!-- /grid-a -->
			</div>
			<!--main content end-->
			<!--footer-->
		</div>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/artTemplate.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
		<!--所有英雄-->
		<script type="text/html" id="allHerosTemp">
			<li data-icon="false">
				<a href="#">
					<img src="http://ossweb-img.qq.com/images/lol/img/champion/{{en_name}}.png">
					<h2>{{nick}}</h2>
					<p>{{name}}</p>
					<p class="p1">
						<span>{{tag2}}</span>
						<span>{{tag3}}</span>
					</p>
				</a>
			</li>
		</script>
		<script>
			$.ajax({
				type: "get",
				url: "json/heros.json",
				async: true,
				dataType: "json",
				success: function(data) {
					$.each(data, function(i, val) {
						var $li = $(template('allHerosTemp', val));
						if (i % 2 == 0) {
							$li.appendTo($(".ui-block-a ul"));
						} else {
							$li.appendTo($(".ui-block-b ul"));
						}
					});
					$(".herosInfo").listview("refresh");
				},
				error: function() {
					alert("服务器错误");
				}
			});
		</script>
		<!--所有英雄-->
	</body>

</html>